<template>
	<view class="body">
		<myHeader :title="title"></myHeader>
		<view class="m-20">
			<view class="item mt-40">
				<view class="label text-gray">团队名称</view>
				<view class="picker">
					<uni-easyinput type="text" v-model="teamName" placeholder="请输入团队名称" />
				</view>
			</view>
			<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			<view class="item mt-40">
				<view class="label text-gray">组长</view>
				<view class="picker">
					<picker @change="bindPickerChange($event,leaderCandidates,leaderCandidateIdx)" :range="leaderCandidates"
						:range-key="'realName'">
						<view class="uni-input">{{leaderCandidates[leaderCandidateIdx].realName}}</view>
					</picker>
				</view>
			</view>
			<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			<view class="mt-20">
				<view class="mt-20 text-gray">组员</view>
				<view class="item mt-20">
					<view v-if="membersCandidates.length == 0">暂无未分配团队的组员，请先添加组员用户</view>
					<view>
						<uni-data-checkbox v-model="members" :multiple="true" :localdata="membersCandidates">
						</uni-data-checkbox>
					</view>
				</view>
				<hr class="mt-20" style="background-color: #E5E5E5;height: 1px;border:none">
			</view>
			<view class="mt-20 ">
				<button class="bg-red text-white" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: '增加团队',
				search: '',
				btnPattern: {
					buttonColor: '#e20909'
				},
				leaderCandidates: [{
					userId: 0,
					realName: '点击新选择组长'
				}],
				teamName: '',
				leaderCandidateIdx: 0,
				leaderId: '',
				membersCandidates: [],
				membersCandidateIdx: 0,
				members: [],
			}
		},
		created() {
			this.getLeaders();
			this.getLMembers();
			console.log(this.membersCandidates)
		},
		methods: {
			// 选中后
			bindPickerChange(e, arr, idx) {
				this.leaderCandidateIdx = e.target.value;
				this.leaderId = arr[this.leaderCandidateIdx].userId;

			},
			// 获取组长
			getLeaders() {
				NetWorkTool.POSTFORM('/api/federation-teams-relation/byRoleCodeUserInfo', {
					roleCode: 'fl-group-leader'
				}, true).then(res => {
					console.log(res)
					for (let item of res) {
						this.leaderCandidates.push(item)
					}
				});

			},
			// 获取组员
			getLMembers() {
				NetWorkTool.POSTFORM('/api/federation-teams-relation/byRoleCodeUserInfo', {
					roleCode: 'fl-group-member'
				}, true).then(res => {
					for (let item of res) {
						let data = {};
						data.value = item.userId;
						data.text = item.realName;
						this.membersCandidates.push(data)
					}
				});
			},
			// 点击提交
			submit() {
				if(this.teamName == "" || this.leaderId == "") {
					uni.showToast({
						title: "请完成信息填写",
						duration: 2000,
						icon: 'none',
					});
					return 
				}
				
				let param = {
					"leader": this.leaderId,
					"members": this.members.toString(),
					"teamName": this.teamName,
				}
				NetWorkTool.POST('/api/federation-teams-relation/addTeam', param, true).then(res => {
					uni.navigateTo({
						url: './teamIndex'
					})
						// 提交成功后删除表数据
					this.leaderId = '';
					this.members = [];
					this.teamName = ''
				});

			},
		},
		components: {
			myHeader
		},
	}
</script>

<style scoped>
	@import url("/static/party_building/assets/style/federation.css");

	.item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}

	.item .label {
		flex: 0 0 30%;

	}

	.item .picker {
		flex: 0 0 70%;
	}

	.item .row {
		flex: 0 0 40%;
	}
</style>
